<template>
  <el-container style="width: 100%">
    <el-aside width="12%" style="height: border-box" >
      <!-- 菜单栏 -->
      <el-menu
          :default-openeds="openeds"
          background-color="#fafafa"
          text-color="#BFCBD9"
          unique-opened
          active-text-color="#3491FF"
          router
          :collapse-transition="false"
      >
        <el-submenu class="submenu" index="1">
          <template #title>
            <i class="el-icon-s-custom"></i>
            <span style="color: #2f2f2f"> 个人问卷 </span>
          </template>
          <el-menu-item ><el-button type="text" @click="gotoCreate"><i class="el-icon-menu"></i>我创建的</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="gotoRecycle"><i class="el-icon-menu"></i>回收站</el-button> </el-menu-item>
        </el-submenu>
        <el-submenu class="submenu" index="2">
          <template #title>
            <i class="el-icon-document-add"></i>
            <span style="color: #2f2f2f"> 新建问卷 </span>
          </template>
          <el-menu-item><el-button type="text" @click="newCommon"><i class="el-icon-document"></i>普通问卷</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="newVote"><i class="el-icon-document"></i>投票问卷</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="newApply"><i class="el-icon-document"></i>报名问卷</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="newExam"><i class="el-icon-document"></i>考试问卷</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="newCardin"><i class="el-icon-document"></i>疫情打卡问卷</el-button> </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main class="listBack">
      <div style="font-size:25px" class="movePage">
        <el-button type="primary" size="mini" style="width: 90px" icon="el-icon-arrow-left"  @click="toLastPage">上一页</el-button>
        &nbsp;&nbsp;
        <el-input v-model="nowPage" placeholder="请输入页码" style="width: 70px"></el-input>
        <el-button  type="primary" @click="showDeleted" style="width: 70px">显示</el-button>
        <span style="font-size: 20px">      共{{getTotalPage()}}页</span>
        &nbsp;&nbsp;
        <el-button type="primary" size="mini" style="width: 90px" @click="toNextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </div>
      <el-table class="tableBack" header-row-style="font-size:20px"  style="width: 50%"  height="73%" :data="questionnaires"  :header-cell-style="{'text-align':'center'}">
        <el-table-column prop="id" width="1px" v-if="false">
        </el-table-column>
        <el-table-column prop="name" label="问卷名"  min-width="100px" align="center">
        </el-table-column>
        <el-table-column prop="type" label="问卷类型"  min-width="100px" align="center">
        </el-table-column>
        <el-table-column prop="operation" label="执行操作"  min-width="100px" align="center">
          <template v-slot="scope">
            <el-button @click="restore(scope.row)" class="el-icon-refresh-left" type="text" style="font-size: 17px">还原</el-button>
            <el-button @click="deleteForever(scope.row)" class="el-icon-delete" type="text" style="font-size: 17px">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      openeds:['1','2'],
      uniqueOpened:false,
      dialogVisible:false,
      form1: {
        username:'',
        page:'',
      },
      form2:{
        qid:'',
        is_delete:'',
      },
      form3:{
        questionnaire_id:'',
      },
      form4:{
        username:'',
      },
      form_newQuestionnaire: {
        username:'',
        type:'',
      },
      questionnaires:[{
        id:'',
        type:'',
        name:'',
      }],
      username:localStorage.getItem('username'),
      nowPage:'',
      totalPage:'',
    };
  },
  mounted() {
    this.gotoRecycle()
  },
  methods:{
    toNextPage:function (){
      if(this.totalPage===0){
        this.$alert('当前没有内容')
        return
      }
      this.nowPage++
      if(this.nowPage>this.totalPage){
        this.nowPage--
        this.$alert('已经是最后一页啦')
        return;
      }
      this.form1.username=this.username
      this.form1.page=this.nowPage
      const that =this
      this.$options.methods.postDeleteList(this.form1,that)
    },
    toLastPage:function (){
      if(this.totalPage===0){
        this.$alert('当前没有内容')
        return
      }
      this.nowPage--
      if(this.nowPage<=0){
        this.nowPage++
        this.$alert('已经是第一页啦')
        return;
      }
      this.form1.username=this.username
      this.form1.page=this.nowPage
      const that =this
      this.$options.methods.postDeleteList(this.form1,that)
    },
    gotoCreate:function (){
      this.$router.push('/meCreate')
    },
    gotoRecycle:function (){
      this.form1.username=this.username
      this.form1.page='1'
      this.nowPage=this.form1.page
      const that =this
      this.$options.methods.postDeleteList(this.form1,that)
    },
    newCommon:function (){
      this.form_newQuestionnaire.username=this.username
      this.form_newQuestionnaire.type='default'
      axios.post("createquestionnaire/",this.form_newQuestionnaire).then((response) => {
        console.log(response.data.questionnaire_id)
        this.$router.push('/questionnaire/'+response.data.questionnaire_id);
      });
    },
    newVote:function (){
      this.form_newQuestionnaire.username=this.username
      this.form_newQuestionnaire.type='vote'
      axios.post("createquestionnaire/",this.form_newQuestionnaire).then((response) => {
        console.log(response)
        this.$router.push('/questionnaire/'+response.data.questionnaire_id)
      });
    },
    newApply:function (){
      this.form_newQuestionnaire.username=this.username
      this.form_newQuestionnaire.type='apply'
      axios.post("createquestionnaire/",this.form_newQuestionnaire).then((response) => {
        console.log(response)
        this.$router.push('/questionnaire/'+response.data.questionnaire_id)
      });
    },
    newExam:function (){
      this.form_newQuestionnaire.username=this.username
      this.form_newQuestionnaire.type='exam'
      axios.post("createquestionnaire/",this.form_newQuestionnaire).then((response) => {
        console.log(response)
        this.$router.push('/questionnaire/'+response.data.questionnaire_id)
      });
    },
    newCardin:function (){
      this.form_newQuestionnaire.username=this.username
      this.form_newQuestionnaire.type='cardin'
      axios.post("createquestionnaire/",this.form_newQuestionnaire).then((response) => {
        console.log(response)
        this.$router.push('/questionnaire/'+response.data.questionnaire_id)
      });
    },
    showDeleted:function (){
      this.form1.username=this.username
      this.form1.page=this.nowPage
      const that = this
      this.$options.methods.postDeleteList(this.form1,that)
    },
    restore:async function (row){
      this.form2.qid=row.id
      this.form2.is_delete='False'
      await axios.post("delete/", this.form2).then( ()=> {
      });
      this.form1.username=this.username
      this.form1.page=this.nowPage
      const that = this
      this.$options.methods.postDeleteList(this.form1,that)
      this.$alert('恢复成功')
    },
    getTotalPage:function (){
      this.form1.username=this.username
      this.form1.page='1'
      axios.post("delete_list/", this.form1).then((response) => {
        this.totalPage=response.data.total_page
      });
      return this.totalPage
    },
    deleteForever:async function (row){
      this.form3.questionnaire_id=row.id
      console.log(this.form3.qid)
      await axios.post("delete_questionnaire/", this.form3).then(() => {
      })
      this.form1.username=this.username
      this.form1.page=this.nowPage
      const that = this
      this.$options.methods.postDeleteList(this.form1,that)
      this.$alert('删除成功')
    },
    postDeleteList:function (form,that){
      axios.post("delete_list/", form).then((response) => {
        that.questionnaires=[]
        for (var i = 0; i < response.data.questionnaires.length; i++) {
          let str=''
          if(response.data.questionnaires[i].type==='default'){
            str='普通问卷'
          }else if(response.data.questionnaires[i].type==='apply'){
            str='报名问卷'
          }else if(response.data.questionnaires[i].type==='vote'){
            str='投票问卷'
          }else if(response.data.questionnaires[i].type==='exam'){
            str='考试问卷'
          }else if(response.data.questionnaires[i].type==='cardin'){
            str='疫情打卡问卷'
          }
          that.questionnaires.push({
            id:response.data.questionnaires[i].id,
            name:response.data.questionnaires[i].name,
            type:str
          })
        }
      });
    }
  }
};
</script>

<style scoped>
.el-header {
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  padding-left: 0;
  align-items: center;
  height: 80px;
  align-content: center;
  justify-content: space-between;
}
.el-container {
  height: 100%;
  position: fixed;
  font-family: "微软雅黑";
}
.el-menu {
  height: 100%;
}
.movePage{
  line-height: 70px;
  top: 73%;
  position: absolute;
  transform: translate(-50%,0%);
  left: 55%;
}
.listBack{
  width: 88%;
  background-color: #f0f0f0;
}
.tableBack{
  left: 50%;
  transform: translate(-50%,0%);
}
</style>
